今日要點
》前言
》申請 OpenWeatherMap API Key
》介紹 flutter_weather 專案
》下載並編譯 flutter_weather 專案

前言

在 Github 裡找看看有沒有天氣相關的專案，試了幾個，LonelyCpp/flutter_weather 這個UI效果蠻不錯的，有164個星星。而且多認識了一下 Open Weather Map 的服務，但是他的版面放在我的iPhone 11 有點問題，有空我可以練習修一下版面。

專案中的天氣資料是使用 Open Weather Maps API 所以，一開始，我們要先申請一下帳號。

申請 OpenWeatherMap API Key

這個服務是要收費的，不過他有免費的版本，雖然免費版的 每分鐘只能呼叫 60 次，一個月只能呼叫1百萬次，如果使用的人數不多，應該是夠用的，

首先到這裡申請帳號 https://home.openweathermap.org/users/sign_up

確認一下信箱，就可以登入取得 api key 了。

切到 API Keys, 把下面的 key 複制下來。

介紹 flutter_weather 專案

因為這個 App 功能蠻易懂的，查看當前天氣狀況，所以我們就看一下在 README.md 的介面說明吧。

介面蠻簡潔好看的。

下載並編譯 flutter_weather 專案

所以我們就來練習編譯一下看看有沒有問題。

那麼我們就開始下載並且建立這個 flutter_weather 專案囉。

% git clone https://github.com/LonelyCpp/flutter_weather.git

Cloning into 'flutter_weather'...
remote: Enumerating objects: 477, done.
remote: Total 477 (delta 0), reused 0 (delta 0), pack-reused 477
Receiving objects: 100% (477/477), 3.20 MiB | 1.67 MiB/s, done.
Resolving deltas: 100% (186/186), done.

% cd clock 
% flutter pub get

Running "flutter pub get" in flutter_weather...　　　　1.1s

我們要先在 lib/src/api/ 建立一個 api_keys.dart 的檔案。

class ApiKey {
static const OPEN_WEATHER_MAP = 'your_key';
}

試 build 一下，

% flutter run -d all

OK 成功！設定一下地點，換成 Taipei XD

程式的圖示是使用這個網站提供

weather-icons ，在 Github 裡有 5.7K 的星星 XD

有天氣相關的專案，可以使用唷。

程式架構研究

Main.dart : AnimatedClock

screens / weather_screen.dart : Scaffold

專案的特色，有幾點還想研究的，有空再來研究吧。

• Dark and Light themes
• Current temperature, max and min temperature, sunset, sunrise
• Custom icons for each weather condition
• Beautifully animated transitions
• BLoC pattern for API calls

今天就先這樣吧。

好，第10天，寫完。

參考：

• Инструкция: как создать приложение для просмотра погоды на Flutter